<script setup>
/*
路由传值：
  vue2:三种
     query
       this.$router.push('/xxx?id=123')
       this.$route.query.id
     动态路由匹配
       配制路由
         {
          path:'/xxx/:id'
         }
        this.$router.push('/xxx/123')
        this.$route.params.id
      params传值:内存中传值，刷新浏览器数据就丢失  
          {
            name:'Home',
            path:'/'      
          }
          this.$router.push({
            name:'Home',
            params:{
              id:123
            }
          })
          this.$route.params.id

   vue3 二种
      query
        import {useRouter,useRoute} from 'vue-router'
        const router=useRouter()
        const route=useRoute()
        router.push('/xxx?id=123')
        route.query.id
     动态路由匹配
       配制路由
         {
          path:'/xxx/:id'
         }
         import {useRouter,useRoute} from 'vue-router'
         const router=useRouter()
         const route=useRoute()
          router.push('/xxx/123')
          route.params.id


*/
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const goHome = () => {
  router.push('/')
}
const goAbout = () => {
  router.push('/about')
}
</script>

<template>
  <button @click="goHome">跳转到Home页</button>
  <button @click="goAbout">跳转到About页</button>
  <hr />
  <br />
  <br />
  <br />
  <router-view></router-view>
</template>

<style scoped></style>
